<template>
    <div style='position: relative'>
        <div
            style='text-align: center; width: 100%; max-width: 1500px; position: absolute; left: 50%; top: 0; transform: translate(-50%,0);'>
            <el-row :gutter='20'>
                <el-col :span='16'>
                    <el-row :gutter='20' class='mgb20'>
                        <el-card shadow='hover'>
<!--                            标题-->
                            <h1>{{this.$route.query.name}}</h1>
                        </el-card>
                    </el-row>
                    <el-card shadow='hover' style='text-align: left' class='mgb20'>
<!--                        详情，用内联html加载-->
                        <iframe
                            id="iframeId"
                            :src="url"
                            frameborder="0"
                            scrolling="auto"
                            style='background-color: transparent;width: 100%; height: 742px;'>
                        </iframe>
<!--                        <div class='markdown-body'>-->
<!--                            <markdown />-->
<!--                        </div>-->
                    </el-card>
                    <el-card shadow='hover' class='mgb20'>
                        <div class='clearfix'>
                            <h2>代码编辑</h2>
                        </div>
                        <code-edit></code-edit>
                        <router-link to='/status' style='color: white'>
                            <el-button type='primary' round style='width: 100px; padding: 0'>
                                <div style='font-family: "黑体"; font-size: 20px'>
                                    提交
                                </div>
                            </el-button>
                        </router-link>
                    </el-card>
                </el-col>
                <el-col :span='8'>
                    <el-card shadow='hover' class='mgb20' style='height:100%'>
                        <writer-info
                            v-bind:author = "author"
                            v-bind:time = "time"
                            v-bind:memory = "memory"
                            v-bind:school= 'school'
                        ></writer-info>
                    </el-card>
                    <el-card shadow='hover' class='mgb20' style='height:100%'>
                        <template #header>
                            <div class='clearfix'>
                                <span>提交统计</span>
                            </div>
                        </template>
                        <submit-data></submit-data>
                    </el-card>
                    <el-card shadow='hover' class='mgb20' style='height:100%'>
                        <template #header>
                            <div class='clearfix'>
                                <span>历史提交</span>
                            </div>
                        </template>
                        <submit-history></submit-history>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
// 引入 markdown 文件，引入后是一个组件，需要在 components 中注册
import markdown from '../problemsMD/1.md';
// 其他元素使用 github 的样式
import 'github-markdown-css';
// 代码高亮
import 'highlight.js/styles/github.css';
//提交信息
import SubmitData from '@/components/common/SubmitData';
//作者信息
import WriterInfo from '@/components/common/WriterInfo';
//历史提交
import SubmitHistory from '@/components/common/SubmitHistory';
//代码编辑
import CodeEdit from '@/components/common/CodeEditor';

export default {
    name: 'problem',
    components: {
        WriterInfo,
        SubmitData,
        SubmitHistory,
        CodeEdit,
        markdown
    },
    data() {
        return {
            url: "http://localhost:8080/" + this.$route.query.id + ".html",
            author: this.$route.query.author,
            school: this.$route.query.school,
            time: this.$route.query.time,
            memory: this.$route.query.memory,

            progressList: [
                {
                    name: 'Accepted',
                    planNum: 150,
                    completeNum: 70
                },
                {
                    name: 'Wrong Answer',
                    planNum: 150,
                    completeNum: 30
                },
                {
                    name: 'Time Limit Exceed',
                    planNum: 150,
                    completeNum: 23
                },
                {
                    name: 'Memory Limit Exceed',
                    planNum: 150,
                    completeNum: 17
                },
                {
                    name: 'Compilation Error',
                    planNum: 150,
                    completeNum: 10
                }
            ]
        };
    },
    methods: {
        // 设置进度
        setItemProgress(data) {
            if (data.completeNum > data.planNum) {
                return 100;
            } else {
                return parseInt((data.completeNum / data.planNum).toFixed(1) * 100);
            }
        },

// 自定义进度条文字
        setItemText(row) {
            var a = row.completeNum / row.planNum * 100;
            return () => {
                return row.name + ': ' + a.toFixed(2) + '%';
            };
        },

// 设置当前进度条状态，显示不同颜色
        setItemStatus(data) {
            if (data.completeNum > data.planNum) {
                return 'red';
            } else if (data.completeNum === data.planNum) {
                return '#84b401';
            } else {
                if (data.completeNum * 4 < data.planNum) {
                    return '#01a4aa';
                } else if (data.completeNum * 2 < data.planNum) {
                    return '#01aa91';
                } else if (data.completeNum * 4 < data.planNum * 3) {
                    return '#00ad4e';
                } else {
                    return '#37b401';
                }
            }
        }
    }
};
</script>

<style scoped>
* {
    padding: 0.5em;
    line-height: 1.5em;
}

p {
    text-indent: 2em;
}
</style>
